import React, { useCallback } from 'react';
import Taro from '@tarojs/taro';
import { View, Image, Swiper, SwiperItem } from '@tarojs/components';
import './index.scss';

const ModuleSlider = ({ componentCfg }) => {
  const goToOtherPageByLink = useCallback((url) => {
    Taro.navigateTo({
      url,
    });
  }, []);
  function extractNumber(str) {
    const match = str.match(/\d+\.?\d*/);
    return match ? parseFloat(match[0]) : null;
  }

  return (
    <View className="ModuleSlider" style={{
      paddingTop: componentCfg.styleSettingRender.paddingTop,
      paddingBottom: componentCfg.styleSettingRender.paddingBottom,
      paddingLeft: componentCfg.styleSettingRender.paddingLeft,
      paddingRight: componentCfg.styleSettingRender.paddingRight,
    }} >
      {componentCfg?.styleSetting?.style == '1'?
      <Swiper className="banner" indicatorColor="rgba(255,255,255,0.5)" indicatorActiveColor="#ef1033" circular indicatorDots autoplay
        interval={(componentCfg?.styleSettingRender?.autoplaySpeed>5?componentCfg?.styleSettingRender?.autoplaySpeed:componentCfg?.styleSettingRender?.autoplaySpeed*1000) || 3000}
        style={{ height: componentCfg?.styleSettingRender?.sliderHeight || '300px' }}
      >
        {componentCfg?.content?.items?.length > 0 &&
          componentCfg.content.items.map((ad, index) => (
            <SwiperItem key={'swipicture' + '_' + index}>
              <Image
                className="bannerIcon"
                mode="aspectFill"
                style={{ borderRadius: componentCfg.styleSettingRender.borderRadius }}
                src={ad.imageUrl}
                key={'swiperImage' + index}
                onClick={() => ad?.url?.length && goToOtherPageByLink(ad.url)}
              />
            </SwiperItem>
          ))}
      </Swiper>:<View className={`slider-multi ${componentCfg?.styleSetting?.carouselPosition == 'right'?'flip':''}`}>
        <View className='multi-swipers'>
          <Swiper className="banner" indicatorColor="rgba(255,255,255,0.5)" indicatorActiveColor="#ef1033" circular indicatorDots autoplay
            interval={(componentCfg?.styleSettingRender?.autoplaySpeed>5?componentCfg?.styleSettingRender?.autoplaySpeed:componentCfg?.styleSettingRender?.autoplaySpeed*1000) || 3000}
            style={{ height: componentCfg?.styleSettingRender?.sliderHeight || '300px' }}
          >
            {componentCfg?.content?.swipers?.length > 0 &&
              componentCfg.content.swipers.map((ad, index) => (
                <SwiperItem key={'swipicture' + '_' + index}>
                  <Image
                    className="bannerIcon"
                    mode="aspectFill"
                    style={{ borderRadius: componentCfg.styleSettingRender.borderRadius }}
                    src={ad.imageUrl}
                    key={'swiperImage' + index}
                    onClick={() => ad?.url?.length && goToOtherPageByLink(ad.url)}
                  />
                </SwiperItem>
              ))}
          </Swiper>
        </View>
        <View className='multi-static'>
          {componentCfg.content.statics?.map((ad,idx)=>{
            return <Image className='static-imgs' src={ad.imageUrl} mode="aspectFill" style={{ 
              borderRadius: componentCfg.styleSettingRender.borderRadius,
              height:(extractNumber(componentCfg?.styleSettingRender?.sliderHeight)/2-5) || '140px'
            }} key={'swiperImage' + idx} onClick={() => ad?.url?.length && goToOtherPageByLink(ad.url)} />
          })}
        </View>
      </View>}
    </View>
  );
};

export default ModuleSlider;
